<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  width: {
    type: Number,
    default: 927
  },
  height: {
    type: Number,
    default: 370
  },
  data: {
    type: Array,
    default: () => []
  }
})
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x, shape.y]
    const c1 = [shape.x - 9, shape.y - 9]
    const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
    const c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
  }
})

// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c1 = [shape.x, shape.y]
    const c2 = [xAxisPoint[0], xAxisPoint[1]]
    const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 6]
    const c4 = [shape.x + 13, shape.y - 6]
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  }
})

// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y]
    const c2 = [shape.x + 13, shape.y - 6]
    const c3 = [shape.x + 4, shape.y - 15]
    const c4 = [shape.x - 9, shape.y - 9]
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  }
})
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)

// 最大值数据（仅作为背景参考，不再限制实际数据）
const MAX = [50, 50, 50, 50, 50]
// 第一组数据（底部）
const VALUE1 = props.data[1]
// 第二组数据（顶部）- 部分数据与第一组叠加后将超过MAX值
const VALUE2 = props.data[2]
// 计算两组数据总和（用于动态调整Y轴范围）
const TOTAL = VALUE1.map((v, i) => v + VALUE2[i])
// 动态计算Y轴最大值（取总和的最大值，确保所有数据都能显示）
const Y_AXIS_UNIT = '吨'
const option = {
  backgroundColor: 'transparent',
  legend: {
    tooltip: {
      show: true
    },
    // legend 必须和 data那里对应
    data: ['入库', '出库'],
    top: '0%',
    right: '8%',
    icon: 'circle',
    itemWidth: 11, // 可单独设置图例列表中图标的宽度:cite[1]:cite[4]
    itemHeight: 11, // 可单独设置图例列表中图标的高度:cite[1]:cite[4]
    textStyle: {
      color: '#fff',
      fontSize: '16rem'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  graphic: [
    {
      type: 'text', // 类型：文本
      style: {
        text: '单位：' + Y_AXIS_UNIT, // 单位内容：吨
        fontSize: '16rem', // 与Y轴刻度文字大小一致（适配rem）
        fill: 'rgba(0, 209, 229, 1)', // 与Y轴文字颜色一致
        fontFamily: 'dt' // 与Y轴字体一致
      }
    }
  ],
  grid: {
    left: 0,
    right: '10rem',
    bottom: '0rem',
    top: '30rem',
    // grid内是否包含 label 如果true 容易label截断 bottom值不足的情况时
    containLabel: false
  },
  xAxis: {
    type: 'category',
    data: props.data[0],
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white'
      }
    },
    offset: 5, // 距离坐标轴距离
    axisTick: {
      show: false,
      length: 9,
      alignWithLabel: true,
      lineStyle: {
        color: '#7DFFFD'
      }
    },
    axisLabel: {
      show: true,
      fontSize: '16rem',
      fontFamily: 'sr',
      color: 'rgba(0, 209, 229, 1)'
    }
  },
  yAxis: {
    min: 0,
    max: 50, // 使用动态计算的最大值
    type: 'value',
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      fontFamily: 'dt',
      color: 'rgba(0, 209, 229, 1)',
      fontSize: '16rem'
    },
    boundaryGap: ['20%', '20%']
  },
  series: [
    // 第二组数据（顶部）
    {
      type: 'line',
      name: '入库',
      itemStyle: {
        color: 'rgba(0, 230, 255, 1)'
      },
      smooth: true,
      data: VALUE1, // 纵坐标数据
      lineStyle: {
        width: 2,
        color: 'rgba(0, 230, 255, 1)'
      }
    },
    {
      type: 'line',
      name: '出库',
      itemStyle: {
        color: 'rgba(251, 179, 8, 1)'
      },
      smooth: true,
      data: VALUE2, // 纵坐标数据
      lineStyle: {
        width: 2,
        color: 'rgba(251, 179, 8, 1)'
      }
    }
  ]
}

const echart = ref()

onMounted(() => {
  console.log(echart.value)
  const e = echarts.init(echart.value)
  e.setOption(option)
})
</script>

<template>
  <div
    ref="echart"
    :style="{
      width: width + 'rem',
      height: height + 'rem'
    }"
  ></div>
</template>
